import React, {Component} from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  Platform,
  StyleSheet,
  ActivityIndicator,
  Image,
  ListView,
  FlatList
} from 'react-native'
import {Actions} from "react-native-router-flux";
import {ListRow} from 'teaset'
import * as String from './../../utils/srting'
import font from './../../styles/font'
import Toast2, {
  DURATION
} from 'react-native-easy-toast'
import {SafeAreaView} from "./UserChatsScene";


class UserShareScene extends Component{
  constructor(props){
    super(props)
    this.state = {
      dataSource: [],
      jifen: ''
    }
  }

  componentDidMount() {
    this.props.actions.userShare()
  }

  componentWillReceiveProps(nextProps) {
    const {
      userShare,
    } = nextProps;

    if(this.props.userShare !== userShare){
      if (userShare.error !== false) {
        if (userShare.error.status === 401) {
          Actions.login()
          return;
        }
        this.toast.show(userShare.error.message)
      }else{
        if(userShare.data && userShare.data.length > 0){
          this._setRows(userShare.data);
          this.setState({
            dataSource: this._getRows(),
            jifen: userShare.meta.jifen.share_price
          });
        }
      }
    }
  }


  _setRows(rows) {
    this._rows = rows;
  }
  _getRows() {
    return this._rows ? this._rows : [];
  }


  renderRow(userShares){
    let userShare = userShares.item
    return(
      <View style={styles.itemContainer}>
        <Image style={styles.itemImg} source={{uri:userShare.avatar}}/>
        <View style={styles.content}>
          <Text style={font.black18}>{userShare.username}</Text>
          <Text style={{color:'#a9a9a9', marginTop:3, fontSize:14}}> {userShare.province}{userShare.city}</Text>
          <Text style={{color:'#f00', marginTop:10, fontSize:14}}>推广能获得：{this.state.jifen}积分  <Text style={{color:'#a9a9a9', fontSize:14}}>{String.formatTime(userShare.reg_time)}</Text></Text>
        </View>
      </View>
    )
  }


  ListEmptyComponent(){
    return(
      <View style={{height:300, justifyContent:'center', alignItems:'center'}}>
        <Text>没有记录哦~</Text>
      </View>
    )
  }


  ListHeaderComponent(){
    let count = this.state.dataSource.length
    let qian = this.state.jifen / 10;
    let jifen = count * qian;
    let shu = count * this.state.jifen
    return(
      <View style={styles.title}>
        <Text style={{color:'#E12F32',fontSize:23, marginBottom: 10}}>我推荐的朋友</Text>
        <Text style={{color:'#999'}}>推荐合计赚取：
          <Text style={{color:'red'}}>
            {shu}分 / ￥{jifen.toFixed(1)}
          </Text>
        </Text>
      </View>
    )
  }

  render(){
    return(
      <View style={styles.container}>
        <FlatList
          ref={(view) => { this.myFlatList = view; }}
          data={this.state.dataSource}
          renderItem={this.renderRow.bind(this)}
          nestedScrollEnabled={true}
          ListHeaderComponent={this.ListHeaderComponent()}
          ListEmptyComponent={this.ListEmptyComponent.bind(this)}
        />
        <Toast2
          ref={view => this.toast = view}
          style={{backgroundColor:'red'}}
          opacity={0.6}
          position='top'/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'#fff'
  },
  title:{
    // height:40,
    flexDirection:'column',
    marginLeft:10,
    marginBottom:10,
    // alignItems:'center',
    justifyContent: 'center',
    marginTop: 15,
    fontWeight:'bold'
  },
  itemContainer:{
    borderTopColor:'#f6f6f6',
    borderTopWidth:1,
    flexDirection:'row',
    paddingVertical: 10,
  },
  itemImg:{
    width:60,
    height:60,
    margin:10
  },
  content:{
    flex:1,
    paddingVertical:5
  }
})


export const LayoutComponent = UserShareScene

export function mapStateToProps(state, props) {
  return {
    routes: state.routes,
    userShare: state.userShareReducer
  }
}